<template>
  <div class="container">
    <div v-if="!showTimeOut&&showCont">
      <div class="gzhTip" v-if="!isGz">
        <div>你还未关注《本地鸟生活服务》公众号</div>
        <div class="gzBtn" @click="showGzMask = true">关注</div>
      </div>
      <div class="gzMask" v-if="showGzMask">
        <div class="gzImgCont">
          <div class="erweima">
            <img src="static/img/erweima.jpg" />
          </div>
          <div class="erweimaText">长按识别二维码关注</div>
          <div class="closeaErweima" @click="closeErweimaFn">关闭此弹窗</div>
        </div>
      </div>
      <div class="homeBanner">
        <swiper style="max-height:21rem" :aspect-ratio="383/900" :auto="true" dots-position="center">
          <swiper-item class="swiper-demo-img" v-for="(item, index) in homeData.banner" :key="index">
            <img :src="item.image+ossSrc" @click="bannerFn(item)" />
          </swiper-item>
        </swiper>
      </div>
      <van-notice-bar
        class="notice"
        left-icon="volume-o"
        color="#916ce0"
        background="#fff"
        text="为保证资金安全，付款应通过平台提供的安全支付系统完成，禁止线下现金或其他方式交易。"
      />
      <div class="tagTip">
        <div class="tagTipItem">
          <span class="iconfont icon-a-zu195"></span>
          <span>爽约包赔</span>
        </div>
        <div class="tagTipItem">
          <span class="iconfont icon-kefu2"></span>
          <span>在线客服</span>
        </div>
        <div class="tagTipItem">
          <span class="iconfont icon-youzhichangshang"></span>
          <span>质量保障</span>
        </div>
        <div class="tagTipItem">
          <span class="iconfont icon-yihangyige"></span>
          <span>隐私保护</span>
        </div>
      </div>
      <div class="listCont">
        <!-- <div class="listName">家庭保洁</div> -->
        <div :class="index==homeData.package.length-1?'no_border listItem':'listItem'" @click="goDetail(item)" :key="index" v-for="(item,index) in homeData.package">
          <div class="itemImg">
            <img :src="item.package_cover+ossSrc">
            <div class="typeTagWai">
              <div class="typeTag">热销</div>
            </div>
          </div>
          <div class="itemInfo">
            <div class="itemName">
              <span>{{ item.package_name }}</span>
            </div>
            <div class="itemDes">
              {{ item.package_effect }}
            </div>
            <div class="priceVal">
              <span class="price">限时：￥<span style="font-size:0.9rem">{{ item.package_price }}</span></span>
              <span class="oldPrice">¥{{ item.package_original_price }}</span>
            </div>
            <div class="itemTag">
              <div class="tagDes">
                <span class="iconfont icon-shijian"></span>
                <span>{{ item.package_time }}分钟</span>
              </div>
              <div class="saleCont">
                <span class="showNum">热销:{{ item.package_sale }}单<span v-if="item.package_sale>999">+</span> </span>
                <span class="showNum">好评:{{ item.package_score }}%</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footcpm></footcpm>
    <getLoad v-if="!showCont"></getLoad>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
  </div>
</template>

<script>
import footcpm from '@/components/footcpm'
import {technicianuser,is_gz} from "@/http/api";
import { Swiper,SwiperItem } from 'vux'
import getLoad from '@/components/public/getLoad'
  import getTimeOut from '@/components/public/getTimeOut'
  export default {
    components: {getLoad,getTimeOut,footcpm,Swiper,SwiperItem},
    data() {
      return {
        showTimeOut:false,
        showCont:false,
        showGzMask:false,
        isGz:true,
        homeData:{},
      }
    },
    props: {},
    methods:{
      goDetail(item){
        this.$router.push({path:'/detail',query:{id:item.package_id}})
      },
      closeErweimaFn(){
        this.showGzMask = false
      },
      getData(){
        let data ={
          site_city:localStorage.getItem('site_city'),
        }
        technicianuser(data).then((res)=>{
          if(res.data.code==1){
            this.homeData = res.data.data
          }else{
            this.showToast = true
            this.showText = res.data.msg
          }
          this.showCont = true
        }).catch(()=>{
            this.showCont = true
            this.showTimeOut = true
          })
      },
      getIsGz(){
        is_gz().then((res)=>{
          if(res.data.code==1){
            if(res.data.data=='已关注'){
              this.isGz = true
            }else{
              this.isGz = false
            }
          }else{
            this.showToast = true
            this.showText = res.data.msg
          }
        })
      },
    },
    mounted(){
    },
    created() {
      this.getData()
      this.getIsGz()
    },
  }
</script>

<style scoped lang="less">
.container {
  padding-bottom: 3.75rem;
  box-sizing: border-box;
  .gzhTip{
    width: 100%;
    background-color: rgba(0,0,0,1);
    font-size: 0.6rem;
    padding: 0.5rem 4%;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    .gzBtn{
      padding: 0.25rem 1.25rem;
      background-color: #916ce0;
    }
  }
  .gzMask{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    color: white;
    z-index: 111;
    display: flex;
    align-items: center;
    justify-content: center;
    .gzImgCont{
      width: 50%;
      text-align: center;
      img{
        width: 100%;
      }
      .erweimaText{
        margin-top: 0.25rem;
      }
      .closeaErweima{
        margin-top: 0.75rem;
        border: 1px solid #fff;
        padding: 0.25rem;
        border-radius: 2rem;
      }
    }
    .isNewImg{
      width: 80%;
      .closeaErweima{
        width: 60%;
        margin: 2rem auto 0;
      }
    }
    .bigMaskImg{
      width: 90%;
      .closeaErweima{
        width: 60%;
        margin: 1.5rem auto 0;
      }
    }
  }
  .homeBanner{
    width: 92%;
    font-size: 0;
    margin: 0 auto;
    margin-top: 0.75rem;
    img{
      width: 100%;
      border-radius: 0.5rem;
    }
  }
  .notice{
    margin-top: 0.75rem;
  }
  .tagTip{
    display: flex;
    width: 100%;
    padding: 0 4%;
    box-sizing: border-box;
    margin-top: 0.75rem;
    font-size: 0.6rem;
    justify-content: space-between;
    align-items: center;
    .tagTipItem{
      display: flex;
      align-items: center;
      color: #916ce0;
      .iconfont{
        margin-right: 0.25rem;
        font-size: 0.7rem;
      }
      .icon-a-zu195{
        font-size: 0.75rem;
      }
      .icon-youzhichangshang{
        font-size: 0.8rem;
      }
      .icon-yihangyige{
        font-size: 0.9rem;
      }
    }
  }
  .listCont{
      width: 100%;
      padding: 0 4%;
      // background-color: #fff;
      box-sizing: border-box;
      margin-top: rem;
      .listName{
        font-weight: bold;
        font-size: 0.8rem;
        border-left: 0.2rem solid #916ce0;
        padding-left: 0.5rem;
        height: 1rem;
        line-height: 1rem;
      }
      .listItem{
        width: 100%;
        padding: 0.75rem 0;
        // padding: 0.75rem;
        // background-color: #fff;
        border-bottom: 1px solid #ebebeb;
        // margin-bottom: 0.75rem;
        // padding: 1rem 0;
        border-radius: 0.25rem;
        display: flex;
        box-sizing: border-box;
        .itemImg{
          width: 4.5rem;
          font-size: 0;
          overflow: hidden;
          border-radius: 0.25rem;
          margin-right: 0.75rem;
          position: relative;
          .typeTagWai{
              font-size:0.6rem;
              height: 1.1rem;
              line-height: 1.3rem;
              position: absolute;
              top:-0.1rem;
              right: -2.1rem;
              background-color: #916ce0;
              width: 5rem;
              text-align: center;
              transform: rotate(45deg);
              color: white;
              .typeTag{
                transform: scale(0.8);
              }
            }
          img{
            width: 100%;
          }
        }
        .itemInfo{
          width: 0.5rem;
          flex: 1;
          height: 4.5rem;
          padding: 0.1rem 0;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .itemName{
              width: 100%;
              overflow: hidden;
              font-size: 0.7rem;
              height: 1rem;
              line-height: 1rem;
              white-space: nowrap;
              font-weight: bold;
              text-overflow: ellipsis;
              color: #333;
            }
          .itemTag{
            height: 1rem;
            line-height: 1rem;
            font-size: 0.6rem;
            color: #666;
            margin-top: 0.25rem;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            .tagDes{
              background-color: #916ce0;
              color: #fff;
              font-size: 0.6rem;
              padding: 0 0.5rem;
              line-height: 1rem;
              border-radius: 0.1rem;
              box-sizing: border-box;
              display: flex;
              .iconfont{
                font-size: 0.6rem;
                margin-right: 0.25rem;
              }
            }
            .saleCont{
              span{
                margin-left: 0.5rem;
              }
            }
          }
          .itemDes{
            height: 1rem;
            line-height: 1rem;
            font-size: 0.6rem;
            color: #666;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 100%;
            // margin-top: 0.2rem;
          }
          .itemTagCont{
            width: 100%;
            height: 1.2rem;
            overflow: hidden;
            display: flex;
            // margin-top: 0.2rem;
            flex-wrap: wrap;
            .tags{
              font-size: 0.6rem;
              padding: 0.1rem 0.25rem;
              box-sizing: border-box;
              border-radius: 0.15rem;
              margin-right:0.25rem;
              margin-bottom: 0.25rem;
              color: #916ce0;
              border: 1px solid #916ce0;
            }
          }
          .priceVal{
            width: 100%;
            // margin-top: 0.2rem;
            font-size: 0.6rem;
            display: flex;
            display: table-cell;
            .price{
              color: #916ce0;
            }
            .oldPrice{
              color: #666;
              text-decoration: line-through;
            }
          }
        }
      }
      .no_border{
        border-bottom: none;
      }
    }
}
</style>
